import React from 'react';
import { Typography } from 'antd';
import styles from './index.less';

const { Paragraph } = Typography;

const renderName = (launchEmployeeName, taskExecutor) => {
    let str = '';
    if (launchEmployeeName && taskExecutor) {
        str = `(发起人/执行人：${launchEmployeeName}/${taskExecutor})`;
    } else if (launchEmployeeName) {
        str = `(发起人：${launchEmployeeName})`;
    } else if (taskExecutor) {
        str = `(执行人：${taskExecutor})`;
    }
    return str;
};

const TaskListItem = ({ data: { launchEmployeeName = '', taskExecutor = '', taskName = '', taskNo = '' } }) => (
    <div className={styles.TaskListItem}>
        <div>{taskNo}</div>
        <Paragraph ellipsis style={{ flex: 1, marginBottom: 0, marginLeft: 8, marginRight: 8 }}>
            {taskName}
        </Paragraph>
        <div>{renderName(launchEmployeeName, taskExecutor)}</div>
    </div>
);

export default TaskListItem;
